<template>
  <div>
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column
        prop="itemText"
        label="配置文本"
        min-width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="itemValue"
        label="配置数据"
        min-width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="description"
        label="字典描述"
        min-width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作"
        min-width="50"
        align="center"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-popconfirm
            title="确定删除此数据吗？"
            @onConfirm="deleteData(scope.row)"
          >
            <el-button slot="reference" type="text" size="mini" v-no-more-click>删除</el-button>
          </el-popconfirm>
          <el-button
            style="margin-left: 10px"
            type="text"
            size="mini"
            @click="reviseData(scope.$index, scope.row)"
            v-no-more-click
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
    <!--新增/修改的弹框-->
    <el-dialog
      title="添加/修改信息"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :modal="false"
    >
      <OperaDicData
        :dicObj="this.dicObj"
        v-if="dialogVisible"
        :dialogVisible="dialogVisible"
        :codeId="codeId"
        :newData="newData"
        v-on:dialogVisible="closeDialog($event)"
      ></OperaDicData>
    </el-dialog>
    <el-form label-width="80px">
      <el-form-item>
        <el-button @click="close" v-no-more-click>关闭字典</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import OperaDicData from "../system/OperaDicData";
export default {
  components: { OperaDicData },
  name: "RviewData",
  props: {
    draweVisible: {
      type: Boolean,
      required: true
    },
    dicObj: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      newData: false,
      codeId: "",
      dialogVisible: false,
      pagesize: 10,
      current: 1,
      total: 10,
      dataList: []
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    getDataList(current) {
      this.axios({
        methods: "get",
        url: `/sys/dictItem/findByDictId/${this.dicObj.id}`,
        params: {
          pageNo: current
        }
      }).then(res => {
        this.dataList = res.data.data.records;
        this.pagesize = res.data.data.size;
        this.current = res.data.data.current;
        this.total = res.data.data.total;
      }),
        err => {
          console.log(err);
        };
    },
    renderHeader(h) {
      let a = [
        h(
          "el-button",
          {
            props: {
              size: "mini",
              type: "primary"
            },
            on: {
              click: () => {
                this.addData();
              }
            }
          },
          "新增字典配置"
        )
      ];
      return h("div", a);
    },
    close() {
      this.$emit("draweVisible", false);
    },
    //修改数据
    reviseData(index, obj) {
      this.dialogVisible = true;
      this.newData = false;
      this.codeId = obj.id;
    },
    //删除数据
    deleteData(obj) {
      this.axios({
        method: "delete",
        url: `sys/dictItem/delete/${obj.id}`
      }).then(() => {
        this.getDataList(this.current);
      });
    },
    closeDialog(msg) {
      this.dialogVisible = msg;
      this.getDataList(this.current);
    },
    //增加数据
    addData() {
      this.dialogVisible = true;
      this.newData = true;
      this.codeId = 0;
    },
    handleCurrentChange(cpage) {
      this.current = cpage;
      this.getDataList(cpage);
    },
    handleSizeChange(psize) {
      this.current = psize;
      this.getDataList(psize);
    }
  }
};
</script>
<style lang="less"></style>
